/*
 * @Author:bealei
 * 主题色：蓝色
 * 带计数器
 * onedark代码配色
 */
:root {
	/* 主题色	#1688ff		22, 136, 255 */
	--r: 22;
	--g: 136;
	--b: 255;

	--demo-color: rgba(var(--r), var(--g), var(--b));
	--demo-color_01: rgba(var(--r), var(--g), var(--b), .1);
	--demo-color_02: rgba(var(--r), var(--g), var(--b), .2);
	--demo-color_03: rgba(var(--r), var(--g), var(--b), .3);
	--demo-color_06: rgba(var(--r), var(--g), var(--b), .6);
	--demo-color_08: rgba(var(--r), var(--g), var(--b), .8);

	/* 表格边框颜色 */
	--table-color: var(--demo-color);
	/* 表头背景色 */
	--th-bg-color: var(--demo-color_06);
	/* 表头文字色 */
	--th-text-color: #fff;
	/* 单行背景色 */
	--tr-bg-color: #fff;
	/* 双行背景色 */
	--tr2-bg-color: #f6f7f8;

	/* 超链接颜色 */
	--a-color: var(--demo-color);
	/* 标题颜色 */
	--title-color: #334455;
	/* 文字颜色 */
	--text-color: #667788;
	/* 加粗颜色 */
	--blod-color: #123456;

	/* 橙色 #ff8818*/
	--h: 255;
	--o: 136;
	--t: 24;
	/* 代码块颜色 */
	--code-color: rgba(var(--h), var(--o), var(--t), 1);
	/* 代码块背景 */
	--code-bg-color: rgba(var(--h), var(--o), var(--t), .1);

	/* mac风格圆点 */
	--m: #fa3534;
	--a: #ff9900;
	--c: #19be6b;
	/* 代码段边框色 */
	--codes-border: #4f575f;
	/* 代码段背景色 */
	--codes-bg-color: #282c34;

	/* 高亮颜色 */
	--highlight-color: #ff5866;
	/* 大纲颜色 */
	--dagang-color: var(--demo-color);
	--dagang-border: var(--demo-color);
	--dagang-bgcolor: var(--demo-color_02);
	/* 侧边栏颜色 */
	--side-color: #abc;
	--side-bgcolor: #345;
	--sideinput-bgcolor: var(--side-bgcolor);

	--font-1: "Jetbrains Mono", "HarmonyOS Sans SC0", "OplusSans 3.0", "DejaVu Sans Mono", "Inconsolata", "Consolas";
	--font-2: "Inconsolata", "Menlo", "Monaco", 'Fira Code', 'Roboto Mono', monospace, "Consolas";

	/* 内容字体 */
	--body-font: var(--font-1);
	/* 代码字体 */
	--code-font: var(--font-1);
	/* 代码块字体 */
	--codes-font: var(--font-1);
	/* 光标颜色 */
	--guangbiao: var(--demo-color);
	/* 选中高亮 */
	--select-bg: #def;
	/* 代码段文本选中高亮 */
	--select-text-bg-color: var(--demo-color_03);

}

html {
	background-color: #fafafa;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	/* 关闭字体连写 */
	font-variant-ligatures: none;
	/* 光标颜色 */
	caret-color: var(--guangbiao);
}

body {
	font-family: var(--body-font);
	color: var(--text--color);
	line-height: 1.5rem;
	margin: 0;
	overflow-x: hidden;
	/* 字符间距 */
	letter-spacing: 0;
	/* 字体抗锯齿 */
	-webkit-font-smoothing: antialiased;
}

#write {
	max-width: 860px;
	margin: 0 auto;
	padding: 20px 30px 100px;
}

@media only screen and (min-width: 1400px) {
	#write {
		max-width: 1024px;
	}
}

@media only screen and (min-width: 1800px) {
	#write {
		max-width: 1200px;
	}
}

/* ------------------------ 标题 ------------------------ */
#write h1,
#write h2,
#write h3,
#write h4,
#write h5 {
	color: var(--title-color);
	margin: 1.5rem 0;
	font-weight: bold;
	line-height: 1.4;
	cursor: text;
}

#write h1 {
	text-align: center;
	font-size: 2.2rem;
	line-height: 2.2;
	color: #fff;
	background-color: var(--demo-color);
}

#write h2 {
	font-size: 1.8rem;
	border-bottom: 3px solid var(--demo-color);
	margin: 1.4rem 0;
	/* ----------------- */
	color: var(--demo-color);
	padding: 0.1875rem 0.8rem;
}

#write h3 {
	font-size: 1.6rem;
}

#write h4 {
	font-size: 1.4rem;
}

#write h5 {
	font-size: 1.2rem;
}

/* ------------ 图片 ------------ */
.md-image {
	/* margin: 1.2rem auto; */
}

#write img {
	margin: 1.2rem auto;
	border-radius: 4px;
	box-shadow:
		0.3px 0.3px 0.6px rgba(0, 0, 0, 0.028),
		0.7px 0.7px 1.3px rgba(0, 0, 0, 0.04),
		1.3px 1.3px 2.5px rgba(0, 0, 0, 0.05),
		2.2px 2.2px 4.5px rgba(0, 0, 0, 0.06),
		4.2px 4.2px 8.4px rgba(0, 0, 0, 0.072),
		10px 10px 20px rgba(0, 0, 0, 0.1);
}

/* ------------ 分割线 ------------ */
#write hr {
	height: 0.125rem;
	padding: 0;
	margin: 1rem 0;
	background-color: var(--demo-color);
	border: 0 none;
	overflow: hidden;
	box-sizing: content-box;
}

/* ------------ 超链接 ------------ */
#write a {
	color: var(--a-color);
	font-weight: 600;
	padding: 0 2px;
	text-decoration: none;
}

/* ------------ 引用 ------------ */
blockquote {
	padding: 8px 16px;
	border-radius: 4px;
	border-left: 8px solid var(--demo-color);
	background-color: var(--demo-color_01);
}

/* ------------ 高亮 ------------ */
#write mark {
	background-color: transparent;
	color: var(--highlight-color);
	font-weight: bold;
}

/* 选中高亮 */
::selection {
	background-color: var(--select-bg);
}


/* 代码段文本选中高亮 */
.cm-overlay.CodeMirror-selectedtext {
	background: var(--select-text-bg-color) !important;
}
.cm-s-typora-default .CodeMirror-selectedtext {
	background: var(--select-text-bg-color) !important;
}

/* ------------ 段落 ------------ */
#write p {
	line-height: 1.6rem;
	word-spacing: .05rem;
	margin: 0.2rem;
}

/* ------------ 加粗 ------------ */
strong {
	color: var(--blod-color);
}

/* ------------ 多选框 ------------ */
.task-list-done {
	text-decoration: line-through var(--highlight-color);
	color: var(--demo-color);
}

.md-task-list-item>input {
	margin-left: -1.3em;
	margin-top: 0.3rem;
	-webkit-appearance: none;
	background-color: transparent;
}

.md-task-list-item>input:before {
	content: '';
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	width: 1rem;
	height: 1rem;
	vertical-align: middle;
	text-align: center;
	font-size: 0.8rem;
	line-height: 1rem;
	color: #fff;
	border-radius: 2px;
	border: 1px solid var(--demo-color);
	margin-top: -0.4rem;
	transition: all 0.2s linear;
}

.md-task-list-item>input:checked:before,
.md-task-list-item>input[checked]:before {
	content: '\2714';
	color: #fff;
	border: 1px solid var(--demo-color);
	background-color: var(--demo-color_08);
	font-family: 'Courier New', Courier, monospace;
}

/* ------------ 表格 ------------ */
#write table {
	padding: 0;
	word-break: initial;
	text-align: center;
	border: 3px solid var(--table-color);
}

/* 表头 */
#write table th {
	margin: 0;
	padding: 8px 16px;
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--th-text-color);
	background-color: var(--th-bg-color);
	border: 1px solid var(--table-color);
}

/* 单行 */
#write table tr {
	margin: 0;
	padding: 0;
	background-color: var(--tr-bg-color);
	border: 1px solid var(--table-color);
}

/* 双行渐变 */
#write table tr:nth-child(2n) {
	background-color: var(--tr2-bg-color);
}

/* 单元格 */
#write table td {
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--table-color);
}

/* ------------ 代码块 ------------ */
#write code {
	padding: 2px 8px;
	border-radius: 4px;
	color: var(--code-color);
	background-color: var(--code-bg-color);
	font-family: var(--code-font);
}

/* ------- 代码段 ------- */
#write .md-fences {
	border: 2px solid var(--codes-border);
	border-radius: 8px;
	background-color: var(--codes-bg-color);
	padding: 0.5rem;
	line-height: 1.5rem;
	font-family: var(--font-1);
	/* 字符左右间距 */
	/* letter-spacing: 1px; */
}

/* 代码类型提示框 */
.code-tooltip {
	background-color: var(--codes-bg-color);
}

/* 光标颜色 */
.CodeMirror div.CodeMirror-cursor {
	border-left: 2px solid var(--guangbiao);
}


/* MAC的三个圆点 */
.md-fences::before {
	position: absolute;
	content: '';
	background: var(--m);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	left: 12px;
	top: 12px;
	z-index: 999;
	box-shadow: 20px 0px 0px var(--a), 40px 0px 0px var(--c);
}

#write .md-fences {
	/* 配合三个圆点 */
	padding-top: 30px;
}

/* 或者 */
/* .CodeMirror {
	padding-top: 20px !important;
} */

/* 暂时不知道 */
.CodeMirror-sizer {
	box-shadow: 30px 30px 30px rgba(0, 0, 0, 1);
}

/* ------------------------ 大纲 ------------------------ */
/* 侧边栏背景色 */
#typora-sidebar {
	background-color: var(--side-bgcolor);
}

/* 侧边栏背景颜色 */
/* .outline-content {
	background: #345;
} */

/* 侧边栏文字颜色 */
.sidebar-content-content {
	color: var(--side-color);
}

/* 大纲标题 */
.info-panel-tab-title {
	color: var(--demo-color);
}

/* 大纲标题下划线 */
.active-tab-outline #info-panel-tab-outline .info-panel-tab-border {
	background-color: var(--demo-color);
}

/* 搜索框 */
#typora-sidebar input {
	background-color: var(--sideinput-bgcolor);
	color: var(--side-color);
}

/* 搜索框边框色 */
#file-library-search-input:focus {
	border-color: var(--demo-color);
}

/* 搜索框占位符颜色 */
#typora-sidebar input::-webkit-input-placeholder {
	color: var(--highlight-color);
}

/* 侧边栏左边框 */
.outline-item {
	border-left: 4px solid transparent;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* 侧边栏选中 */
.outline-item-active {
	color: var(--dagang-color);
	background-color: var(--dagang-bgcolor);
	border-left: 4px solid var(--dagang-border);
}

/* 选中不加粗 */
.pin-outline .outline-active {
	font-weight: 400;
}

/* 侧边栏悬停 */
.outline-item:hover {
	color: #fff;
	background-color: var(--demo-color);
	box-sizing: border-box;
	/* 默认左右28px,现在边框4px,去除抖动 */
	border-left: 32px solid transparent;
}

/* 没有下划线 */
.outline-label:hover {
	text-decoration: none;
}

/* 每个li的左边距 */
.outline-h1>.outline-item {
	padding-left: 1em
}

.outline-h2>.outline-item {
	padding-left: 2em
}

.outline-h3>.outline-item {
	padding-left: 3em
}

.outline-h4>.outline-item {
	padding-left: 4em
}

.outline-h5>.outline-item {
	padding-left: 5em
}

.outline-h6>.outline-item {
	padding-left: 6em
}
/* ------------------------ 大纲 end------------------------ */
/* ------------------------ 侧边栏滚动条start ------------------------ */
/* 内层滚动槽 */
/* sidebar-menu */
::-webkit-scrollbar-track-piece {
	background-color: var(--demo-color_01);
}

/* 滚动的滑块 */
/* #sidebar-menu */
::-webkit-scrollbar-thumb {
	background-color: var(--demo-color);
}

/* 滚动的滑块停留 */
/* sidebar-menu */
::-webkit-scrollbar-thumb:active {
	background-color: var(--demo-color_06);
}

/* ------------------------ 侧边栏滚动条 end------------------------ */

/* -------------------自动序号 start------------------- */

/* 重置计数器 */
h1 {
	counter-reset: h3;
}

h2 {
	counter-reset: h3;
}

h3 {
	counter-reset: h4;
}

h4 {
	counter-reset: h5;
}

h5 {
	counter-reset: h6;
}

.outline-h1 {
	counter-reset: outline-h3;
}

.outline-h2 {
	counter-reset: outline-h3;
}

.outline-h3 {
	counter-reset: outline-h4;
}

.outline-h4 {
	counter-reset: outline-h5;
}

/* 正文的编号 */
#write h3:before,
h3.md-focus.md-heading:before {
	/** override the default style for focused headings */
	counter-increment: h3;
	content: counter(h3) "、";
}

#write h4:before,
h4.md-focus.md-heading:before {
	counter-increment: h4;
	content: counter(h3) "." counter(h4) " ";
}

#write h5:before,
h5.md-focus.md-heading:before {
	counter-increment: h5;
	content: counter(h3) "." counter(h4) "." counter(h5) " "
}

/* 鼠标选择输入文字的时候不会放大缩小 */
#write>h3.md-focus:before,
#write>h4.md-focus:before,
#write>h5.md-focus:before,
#write>h6.md-focus:before,
h3.md-focus:before,
h4.md-focus:before,
h5.md-focus:before,
h6.md-focus:before {
	color: inherit;
	border: inherit;
	border-radius: inherit;
	position: inherit;
	left: initial;
	float: none;
	top: initial;
	font-size: inherit;
	padding-left: inherit;
	padding-right: inherit;
	vertical-align: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* 序号添加标点符号 */
.outline-content .outline-h3 .outline-label:before {
	counter-increment: outline-h3;
	content: counter(outline-h3) "、";
}

.outline-content .outline-h4 .outline-label:before {
	counter-increment: outline-h4;
	content: counter(outline-h3) "." counter(outline-h4) " ";
}

.outline-content .outline-h5 .outline-label:before {
	counter-increment: outline-h5;
	content: counter(outline-h3) "." counter(outline-h4) "." counter(outline-h5) " ";
}

/* 必须补全 */
.outline-content .outline-h6 .outline-label:before {
	content: none;
}

/* -------------------自动序号 end------------------- */
/* ------------------------ 设置 ------------------------ */

.window-header,
.panel-header {
	color: var(--demo-color);
}

.window-content .nav-group-item.active,
.dropdown-menu li:hover {
	background: var(--demo-color_02);
	color: var(--demo-color_08);
}
/* 文件选中 */
.file-list-item.active{
	background-color: var(--demo-color_02);
}




/* -------------------onedark 配色start------------------- */
:root{
	/* one dark pro 代码配色*/
	--chalky: #e5c07b;
	--coral: #e06c75;
	--dark: #5c6370;
	--error: #f44747;
	--fountainBlue: #56b6c2;
	--green: #98c379;
	--invalid: #ffffff;
	--lightDark: #7f848e;
	--lightWhite: #abb2bf;
	--malbu: #61afef;
	--purple: #c678dd;
	--whiskey: #d19a66;
	--deepRed: #be5046;
	
	--codes-bg: #282c34;
	/* --codes-border: #4f575f; */
}

.cm-s-inner.CodeMirror {
	/*  padding-top: .5rem;
  padding-bottom: .5rem; */
	background-color: var(--codes-bg);
	color: var(--lightWhite);
	/*  font-family: Consolas;
  border-radius: 4px; */
}

/* 重复了 */
.CodeMirror-lines {
	padding-left: 4px;
}

.cm-s-inner .cm-keyword {
	color: var(--purple);
}

/* 操作符 */
.cm-s-inner .cm-operator {
	color: var(--malbu);
}

.cm-s-inner .cm-variable-2 {
	color: #eeffff;
	color: var(--whiskey);
}

/* 内装式 */
.cm-s-inner .cm-builtin {
	color: var(--malbu);
}

/* 原子 */
.cm-s-inner .cm-atom {
	color: var(--whiskey);
}

.cm-s-inner .cm-number {
	color: var(--coral);
}

.cm-s-inner .cm-def {
	color: #82aaff;
}

/* --------------------- */
.cm-s-inner .cm-header {
	color: var(--whiskey);
}

.cm-s-inner .cm-link {
	color: var(--whiskey);
}

/* -------------------- */
.cm-s-inner .cm-string {
	color: var(--green);
}

.cm-s-inner .cm-string-2 {
	color: #f07178;
}

/* 注释 */
.cm-s-inner .cm-comment {
	color: var(--lightDark);
}

.cm-s-inner .cm-variable {
	color: var(--chalky);
}

.cm-s-inner .cm-tag {
	color: var(--coral);
}

/* 标签包围,必须放在下面 */
.cm-s-inner .cm-bracket {
	color: var(--lightWhite);
}

.cm-s-inner .cm-meta {
	color: var(--whiskey);
}

/* 属性 */
.cm-s-inner .cm-attribute {
	color: var(--whiskey);
}

/* 属性 */
.cm-s-inner .cm-property {
	color: var(--lightWhite);
}

/* 限定符 */
.cm-s-inner .cm-qualifier {
	color: var(--whiskey);
}

.cm-s-inner .cm-type {
	color: #f07178;
}

.cm-s-inner .cm-variable-3 {
	color: var(--fountainBlue);
}




.cm-s-inner .cm-error {
	color: rgba(255, 255, 255, 1);
	background-color: var(--error);
}

.cm-s-inner .CodeMirror-matchingbracket {
	text-decoration: underline;
	color: white !important;
}

/* -------------------onedark 配色 end------------------- */